<template>
  <div class="home">
    <router-view></router-view>
    <footer>
      <ul>
        <li v-for="item in state.list" :key="item.name">
          <router-link :to="item.url">
            <span class="iconfont" :class="item.icon"></span>
            <p>{{ item.name }}</p>
          </router-link>
        </li>
      </ul>
    </footer>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  setup() {
    const active = ref(0);
    const state = reactive({
      list: [
        {
          name: "首页",
          icon: "icon-shouye",
          url: "/home/index",
        },
        {
          name: "发现",
          icon: "icon-faxian",
          url: "/home/find",
        },
        {
          name: "动态",
          icon: "icon-duihuakuang",
          url: "/home/dynamic",
        },
        {
          name: "消息",
          icon: "icon-xiaoxi",
          url: "/home/message",
        },
        {
          name: "我的游戏",
          icon: "icon-youxi",
          url: "/home/mygame",
        },
      ],
    });
    return { active, state };
  },
};
</script>

<style lang="less" scoped>
footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  z-index: 999;
  border-top: 1px solid #e6e6e6;

  ul {
    height: 57px;
    width: 100%;
    display: flex;

    .router-link-active {
      color: #47c1c8;
    }
    li {
      width: 20%;
    }
    a {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      span {
        font-size: 20px;
      }
      p {
        margin-top: 6px;
        height: 10px;
        line-height: 12px;
        font-size: 10px;
      }
    }
  }
}
</style>
